<template>
  <div class="import-topic">
    <el-radio v-model="searchType" label="simple">简单搜索</el-radio>
    <el-radio v-model="searchType" label="complex">综合搜索</el-radio>
    <!-- 简单搜索 -->
    <el-input
      v-show="searchType == 'simple'"
      v-model="searchConditions.keyword"
      placeholder="搜索题目，回车确认"
      @keydown.native.enter="searchTopic"
    ></el-input>
    <!-- 复杂搜索 -->
    <el-form
      label-width="100px"
      v-show="searchType == 'complex'"
      :model="searchConditions"
    >
      <el-form-item label="题目类型">
        <el-radio-group v-model="searchConditions.topicType">
          <el-radio label="sc">单选</el-radio>
          <el-radio label="mc">多选</el-radio>
          <el-radio label="bl">填空</el-radio>
          <el-radio label="tof">判断</el-radio>
          <el-radio label="an">问答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题目关键字">
        <el-input
          v-model="searchConditions.keyword"
          placeholder="关键字"
          @keydown.native.enter="searchTopic"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 搜索结果 -->
    <!-- <hr /> -->
    <div
      v-if="searchResults && searchResults.length !== 0"
      class="search-result"
    >
      <h3>搜索结果</h3>
      <ul class="search-result-list">
        <li v-for="item in searchResults" :key="item.tid">
          <el-checkbox v-model="item.checked">{{ item.title }}</el-checkbox>
        </li>
      </ul>
    </div>
    <!-- <common-loading v-else></common-loading> -->
  </div>
</template>

<script>
import CommonLoading from "@/components/CommonLoading.vue";
import { searchTopic } from "@/services/teacher/topic";
export default {
  name: "ImportTopic",
  components: { CommonLoading },
  props: ["searchResults", "setSearchResults"],
  data() {
    return {
      searchType: "simple",
      searchConditions: {},
      //   searchResults: [],
    };
  },
  watch: {
    searchType() {
      this.searchConditions = {};
      //   this.searchResults = [];
      this.setSearchResults([]);
    },
  },
  methods: {
    searchTopic() {
      if (this.searchType == "complex") {
        if (!this.searchConditions.topicType) {
          alert("请选择题目类型");
          return;
        }
      }
      const { topicType, keyword } = this.searchConditions;
      searchTopic(topicType, keyword).then((res) => {
        if (res.data.code == 200) {
          //   this.searchResults = res.data.data;
          this.setSearchResults(res.data.data);
          this.searchConditions.keyword = "";
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.search-result-list {
  list-style: none;
  //   padding-left: 0;
}
</style>